<template>
  <div id="car_work" style="width:100%;height:340px;"></div>
</template>

<script>
// import {vehicleState} from 'config/api';
export default {
  data () {
    return {
      //  车辆状态统计
      car_work_obj: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['报警部门', '数量', '事件统计']
        },
        grid: {
          top: '12%',
          left: '6%',
          right: '10%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        series: [{
          name: '报警部门',
          type: 'bar',
          data: [11, 31, 13, 41, 11, 323, 441],
          itemStyle: {
            normal: {
              label: {
                show: true,   //  是否展示顶部数字
                formatter: "{c}报警部门",  //  数字后面添加单位
                position: 'right',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            subtextStyle: {
              color: '#000'  // 副标题文字颜色
            }
          }
        },
        {
          name: '数量',
          type: 'bar',
          data: [11, 21, 31, 99, 198, 244, 113],
          itemStyle: {
            normal: {
              label: {
                show: true,   //  是否展示顶部数字
                formatter: "{c}个",  //  数字后面添加单位
                position: 'right',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            subtextStyle: {
              color: '#000'  // 副标题文字颜色
            }
          }
        },
        {
          name: '事件统计',
          type: 'bar',
          data: [11, 21, 443, 111, 345, 433, 132],
          itemStyle: {
            normal: {
              label: {
                show: true,   //  是否展示顶部数字
                formatter: "{c}个",  //  数字后面添加单位
                position: 'right',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: '微软雅黑'
                }
              }
            },
            subtextStyle: {
              color: '#000'  // 副标题文字颜色
            }
          }
        }]
      }
    };
  },
  mounted () {
    let userFlow = echarts.init(document.getElementById('car_work'), 'dark');
    // this.car_work_obj.series[0].data.push((Math.random() * 1000).toFixed(0) - 0);
    // this.car_work_obj.series[1].data.push((Math.random() * 1000).toFixed(0) - 0);
    // this.car_work_obj.series[2].data.push((Math.random() * 1000).toFixed(0) - 0);
    userFlow.setOption(this.car_work_obj);
    window.addEventListener('resize', function () {
      userFlow.resize();
    });
  },
  methods: {
    //  车辆状态
    // carWork () {
    //   vehicleState().then((res) => {
    //     let datas = res.data.data;
    //     for (var i = 0; i < datas.length; i++) {
    //       if (datas[i].offlineCnt >= 30) {  //  离线总数在30以上的显示
    //         this.car_work_obj.yAxis.data.push(datas[i].type);
    //         this.car_work_obj.series[0].data.push(datas[i].onlineCnt);
    //         this.car_work_obj.series[1].data.push(datas[i].offlineCnt);
    //         this.car_work_obj.series[2].data.push(datas[i].runningCnt);
    //       }
    //     }
    //     let myChart = echarts.init(document.getElementById("car_work")); //  获取Canvas
    //     myChart.setOption(this.car_work_obj); //  插入数据
    //     //  Canvas自适应
    //     window.addEventListener('resize', function () {
    //       myChart.resize();
    //     });
    //   });
    // }
  }
};
</script>

